<script setup>
import { ref, onMounted } from 'vue'
import { getData, getList } from '@/api/dashboard.js'
import { Refresh } from '@element-plus/icons-vue'
import echarts from './echarts.vue'
onMounted(() => {
  getDataAPI()
  getListAPI()
})
// 时间搜索
const timeData = ref({
  minTime: '',
  maxTime: ''
})
// 漏斗数据
const time = ref(null)
const getDataAPI = async () => {
  const res = await getData(timeData)
  console.log(res)
  basicData.value = res.data
}
// 基础数据
const basicData = ref({})
const search = () => {
  time.value[0] = timeData.value.minTime
  time.value[1] = timeData.value.maxTime
  getDataAPI()
  getListAPI()
}

// 龙虎榜
const tableList = ref([])
const getListAPI = async () => {
  const res = await getList({
    minTime: '2010-20-50 20:31:00',
    maxTime: '2023-6-14 20:31:00'
  })
  console.log(res)
  tableList.value = res.data
}
</script>

<template>
  <div class="container">
    <div class="shop">
      <el-form>
        <el-row type="flex" align="middle">
          <el-col :span="12" pull="8">
            <el-form-item label="选择日期" style="margin-top: 25px; margin-left: 20px">
              <el-date-picker
                type="datetimerange"
                start-placeholder="起始时间"
                end-placeholder="截止日期"
                size="large"
                v-model="time"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD hh:mm:ss"
                @change="timeChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" class="search" style="margin-left: 64px" @click="search"
              >搜索</el-button
            >
          </el-col>
          <el-col :span="2" :offset="6">
            <el-button class="refresh" style="margin-left: 84px">
              <el-icon style="margin-right: 10px"><Refresh /></el-icon>
              刷新</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 基础数据 -->
    <div class="basicData">
      <div class="title">
        <h3>基础数据</h3>
      </div>
      <div class="content">
        <el-row>
          <!-- 线索数量 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>线索数量</p>
                <span>{{ basicData.clueCount }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/clue.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 商机数量 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>商机数量</p>
                <span>{{ basicData.businessChanceCount }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/opport.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 客户数量 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>客户数量</p>
                <span>{{ basicData.clientCount }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/customer.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 销售金额 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>销售金额</p>
                <span>{{ basicData.salesAmount }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/sale.png" alt="" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 今日简报 -->
    <div class="basicData">
      <div class="title">
        <h3>今日简报</h3>
      </div>
      <div class="content">
        <el-row>
          <!-- 线索数量 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>今日新增线索</p>
                <span>{{ basicData.newClueToday }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/today_clue.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 商机数量 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>今日新增商机</p>
                <span>{{ basicData.newBusinessChanceToday }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/today_opport.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 客户数量 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>今日新增客户</p>
                <span>{{ basicData.newCustomerToday }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/today_customer.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 销售金额 -->
          <el-col :span="6">
            <div class="clue">
              <div class="left">
                <p>今日销售额</p>
                <span>{{ basicData.saleroomToday }}</span>
              </div>
              <div class="right">
                <img src="../../assets/dashboard/today_sale.png" alt="" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="backlog">
      <!-- 待办事项 -->
      <div class="left">
        <div class="title">
          <h3>待办事项</h3>
        </div>
        <el-row>
          <!-- 线索数量 -->
          <el-col :span="12">
            <div class="clue transf">
              <div class="left">
                <p>转派</p>
                <span>{{ basicData.pendingClue }}</span>
              </div>
              <div class="right w34">
                <img src="../../assets/dashboard/transfer.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 商机数量 -->
          <el-col :span="12">
            <div class="clue transf" style="margin-left: 15px">
              <div class="left">
                <p>待跟进线索</p>
                <span>{{ basicData.pendingClue }}</span>
              </div>
              <div class="right w34">
                <img src="../../assets/dashboard/follow-up_clue.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 客户数量 -->
        </el-row>
        <el-row style="margin-top: 20px">
          <!-- 线索数量 -->
          <el-col :span="12">
            <div class="clue transf">
              <div class="left">
                <p>待跟进商机</p>
                <span>{{ basicData.pendingBusinessChance }}</span>
              </div>
              <div class="right w34">
                <img src="../../assets/dashboard/follow-up_opport.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 商机数量 -->
          <el-col :span="12">
            <div class="clue transf" style="margin-left: 15px">
              <div class="left">
                <p>待分配线索</p>
                <span>{{ basicData.pendingAllotClue }}</span>
              </div>
              <div class="right w34">
                <img src="../../assets/dashboard/follow-up_assign_clue.png" alt="" />
              </div>
            </div>
          </el-col>
          <!-- 客户数量 -->
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <div class="business">
              <div class="left">
                <p>待分配商机</p>
                <span>{{ basicData.pendingAllotBusinessChance }}</span>
              </div>
              <div class="right w34">
                <img src="../../assets/dashboard/follow-up_money.png" alt="" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="funnel">
        <h4>线索转化漏斗</h4>
        <div id="boxRef1">
          <echarts></echarts>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="sale">
        <h4>销售龙虎榜</h4>
        <div class="table">
          <el-table
            :default-sort="{ prop: ['rankingListPojo.id','validRate'], order: 'descending' }"
            highlight-current-row="true"
            empty-text="数据丢失辣~~~"
            :data="tableList"
          >
            <el-table-column align="center" label="排名" prop="index" type="index" width="80"></el-table-column>
            <el-table-column align="center" label="用户姓名" prop="rankingListPojo.realName" width="100"></el-table-column>
            <el-table-column align="center" label="部门" prop="rankingListPojo.deptId" width="100"></el-table-column>
            <el-table-column
              label="线索转化数(个)"
              sortable
              prop="rankingListPojo.id"
              align="center"
            ></el-table-column>
            <el-table-column label="线索转化占比(%)" align="center" sortable prop="validRate"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="commerce">
        <h4>商机转化龙虎榜</h4>
        <div class="table">
          <div class="table">
            <el-table
            :default-sort="{ prop: ['rankingListPojo.id','validRate'], order: 'descending' }"
            highlight-current-row="true"
            empty-text="数据丢失辣~~~"
            :data="tableList"
          >
            <el-table-column align="center" label="排名" prop="index" type="index" width="80"></el-table-column>
            <el-table-column align="center" label="用户姓名" prop="rankingListPojo.realName" width="100"></el-table-column>
            <el-table-column align="center" label="部门" prop="rankingListPojo.deptId" width="100"></el-table-column>
            <el-table-column
              label="线索转化数(个)"
              sortable
              prop="rankingListPojo.id"
              align="center"
            ></el-table-column>
            <el-table-column label="线索转化占比(%)" align="center" sortable prop="validRate"></el-table-column>
          </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
:v-deep .container {
  background-color: #f9f9f9;
  padding-left: -20px;
  font-size: 16px;
}
.shop {
  background-color: #fff;
  // padding: 10px 0px;
  display: flex;
  justify-self: center;
  align-self: center;
  height: 100px;
  .search {
    width: 100px;
    height: 40px;
    border-radius: 50px;
    background-color: #05cc95;
  }
}
.refresh {
  width: 100px;
  height: 40px;
  border-radius: 50px;
  background-color: #eaeaea;
  color: #000;
  font-size: 16px;
}
.el-col {
  line-height: 80px;
}
::v-deep .el-mian {
  padding: 0px;
  width: 1000px !important;
}
.clue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 280px;
  height: 104px;
  background-color: #fff;
  border-radius: 6px;
  .left {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-content: center;
    margin-left: 20px;
    height: 100%;
    margin-bottom: 40px;
    p {
      height: 20px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }
    span {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24px;
      color: #333333;
    }
  }
  .right {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
    }
  }
}
.title {
  h3 {
    width: 56px;
    height: 20px;
    font-family: PingFangSC-Medium;
    font-weight: 550;
    font-size: 14px;
    color: #444;
    letter-spacing: 0;
  }
}
.backlog {
  position: relative;
  // width: 1125px;
  height: 316px;
  display: flex;
  justify-content: start;
  align-content: center;
  .w34 {
    img {
      width: 34px;
      height: 34px;
    }
  }
  .transf {
    width: 275px;
    height: 88px;
    background: #f5fdf9;
    border: 1px solid #eaebeb;
    box-shadow: 0 3px 7px 0 #eaeaea54;
    border-radius: 4px;
    .left {
      margin-bottom: 50px;
    }
    .right {
      width: 50px;
      height: 50px;
      margin-left: 10px;
    }
  }
}
.business {
  width: 583px;
  height: 98px;
  background: #ffffff;
  box-shadow: 0 3px 7px 0 #eaeaea54;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-left: 20px;
    height: 100%;
    margin-bottom: 50px;
    p {
      width: 70px;
      height: 20px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }
    span {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24px;
      color: #333333;
    }
  }
  .right {
    margin-right: 40px;
    margin-top: 15px;
  }
}
.funnel {
  width: 582px;
  height: 316px;
  // background: rgb(255, 255, 255);
  border-radius: 6px;
  // margin-top: 50px;
  margin-left: 20px;
  h4 {
    margin: 14px 0px;
    font-size: 15px;
    color: #444;
  }
  #boxRef1 {
    background-color: #fff;
    width: 582px;
    height: 316px;
    border-radius: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.list {
  margin-top: 70px;
  width: 100%;
  height: 530px;
  display: flex;
  // justify-content: space-between;
  // background-color: #ba3434;
  .sale {
    width: 48.2%;
    height: 100%;
    // background-color: rgb(255, 255, 255);
    border-radius: 5px;
  }
  .commerce {
    width: 48.2%;
    height: 100%;
    // background-color: rgb(255, 255, 255);
    border-radius: 5px;
    margin-left: 20px;
  }
}
.table {
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
</style>
